<template>
  <el-dialog
      draggable
      v-model="AppendVisible"
      title="添加"
      width="700"
  >
    <el-form
        ref="formRef"
        :model="AppendForm"
        label-width="80px"
        style="padding-right: 60px;"
    >
      <el-row :gutter="20">
        <el-col :span="12" v-for="item in AppendType">
          <el-form-item :label="item.label" :rules="item.rules" :prop="item.prop"
                        v-if="
                        item.showType!=='icon'
                        &&item.showType!=='sex'
                        &&item.showType!=='date'
                        &&item.showType!=='sorts'
                        &&item.showType!=='roles'
                        &&item.showType!=='books'
                        &&item.showType!=='text'
                        &&item.showType!=='state'
                        &&item.showType!=='number'
                        &&item.showType!=='code'
                        &&item.showType!=='borrowState'
">
            <el-input v-model="AppendForm[item.prop]" :placeholder="item.rules[0].message"/>
          </el-form-item>
          <!--     书本条码     -->
          <el-form-item :label="item.label" :rules="item.rules" :prop="item.prop" v-if="item.showType==='code'">
            <el-input disabled v-model="AppendForm[item.prop]" :placeholder="item.rules[0].message"/>
          </el-form-item>
          <!--     数字类型     -->
          <el-form-item :label="item.label" :rules="item.rules" :prop="item.prop" v-if="item.showType==='number'">
            <el-input :type="'number'" v-model="AppendForm[item.prop]" :placeholder="item.rules[0].message"/>
          </el-form-item>
          <!--     图标     -->
          <el-form-item :label="item.label" :rules="item.rules" :prop="item.prop" v-if="item.showType==='icon'">
            <el-select v-model="AppendForm[item.prop]" :placeholder="item.rules[0].message">
              <el-option v-for="i in iconList" :key="i.value" :label="i.label" :value="i.value">
                <component :is="i.value"></component>
              </el-option>
            </el-select>
          </el-form-item>
          <!--     性别        -->
          <el-form-item :label="item.label" :rules="item.rules" :prop="item.prop" v-if="item.showType==='sex'">
            <el-select v-model="AppendForm[item.prop]" :placeholder="item.rules[0].message">
              <el-option v-for="item in [{label:'男',value:'男'},{label:'女',value:'女'}]"
                         :key="item.value" :label="item.label" :value="item.value"
              />
            </el-select>
          </el-form-item>
          <!--    生日      -->
          <el-form-item :label="item.label" :rules="item.rules" :prop="item.prop" v-if="item.showType==='date'">
            <el-date-picker
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                v-model="AppendForm[item.prop]"
                type="date"
                :placeholder="item.rules[0].message"
            />
          </el-form-item>
          <!--     角色        -->
          <el-form-item :label="item.label" :rules="item.rules" :prop="item.prop" v-if="item.showType==='roles'">
            <el-select v-model="AppendForm[item.prop]" :placeholder="item.rules[0].message">
              <el-option v-for="i in rolesList"
                         :key="i.id" :label="i.name" :value="i.id"
              />
            </el-select>
          </el-form-item>
          <!--     类别        -->
          <el-form-item :label="item.label" :rules="item.rules" :prop="item.prop" v-if="item.showType==='sorts'">
            <el-select v-model="AppendForm[item.prop]" :placeholder="item.rules[0].message">
              <el-option v-for="i in sortsList"
                         :key="i.id" :label="i.name" :value="i.id"
              />
            </el-select>
          </el-form-item>
          <!--     书册        -->
          <el-form-item :label="item.label" :rules="item.rules" :prop="item.prop" v-if="item.showType==='books'">
            <el-select v-model="AppendForm[item.prop]" :placeholder="item.rules[0].message">
              <el-option v-for="i in booksList"
                         :key="i.id" :label="i.name" :value="i.id"
              />
            </el-select>
          </el-form-item>
          <!--     状态        -->
          <el-form-item :label="item.label" :rules="item.rules" :prop="item.prop" v-if="item.showType==='state'">
            <el-select v-model="AppendForm[item.prop]" placeholder="请选择...">
              <el-option v-for="item in [{label:'正常',value:'1'},{label:'禁用',value:'0'}]"
                         :key="item.value" :label="item.label" :value="item.value"
              />
            </el-select>
          </el-form-item>
          <!--   借阅状态   -->
          <el-form-item :label="item.label" :rules="item.rules" :prop="item.prop" v-if="item.showType==='borrowState'">
            <el-select v-model="AppendForm[item.prop]" :placeholder="item.rules[0].message">
              <el-option v-for="i in [{name:'在库',id:1},{name:'借出',id:0}]"
                         :key="i.id" :label="i.name" :value="i.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" v-for="item in AppendType">
          <el-form-item :label="item.label" :rules="item.rules" :prop="item.prop" v-if="item.showType==='text'">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model="AppendForm[item.prop]"
                      placeholder="请输入备注..."/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer" style="padding-right: 60px;">
        <el-button size="large" @click="closeVisible(formRef)">取消</el-button>
        <el-button size="large" type="primary" @click="onAppend(formRef)">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {defineProps} from 'vue'
import {defineModel} from 'vue'
import {iconList} from "@/utils";
import {reactive, ref} from 'vue'
import type {FormInstance} from 'element-plus'
import {onMounted} from "vue";
import api from "@/api";

const formRef = ref<FormInstance>();
const AppendVisible = defineModel('visible');
const AppendForm = defineModel('form');
const AppendType = defineModel('type');

const sortsList = ref([]);
const rolesList = ref([]);
const booksList = ref([]);
onMounted(() => {
  if (AppendType.value[0].label == "书册编码") {
    api.sort.listSorts().then((res: any) => {
      sortsList.value = res.data
    })
  }
  if (AppendType.value[0].label == "账号") {
    api.role.listRoles().then((res: any) => {
      rolesList.value = res.data
    })
  }
  if (AppendType.value[0].label == "书本条码") {
    api.books.listBooks().then((res: any) => {
      booksList.value = res.data
    })
  }
})

interface Props {
  closeVisible?: Function;
  onAppend?: Function;
}

defineProps<Props>();
</script>

<style scoped>
svg {
  width: 18px;
  height: 18px;
}
</style>